<template>
  <Panel>
    <template #title class="title">
      <p>商品分类</p>
      <el-button v-waves type="primary" size="mini" @click="addshow"
        >添加分类</el-button
      >
    </template>
    <template #content>
      <!-- 表格 -->
      <el-table :data="cateData" style="width: 100%">
        <el-table-column type="index" :index="1" label="序号" width="120px">
        </el-table-column>
        <el-table-column label="分类名称">
          <template v-slot="{ row }">
            <el-input
              size="mini"
              v-if="row.flag"
              v-model="row.cateName"
              :value="row.cateName"
            ></el-input>
            <span v-else>{{ row.cateName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否启用">
          <template v-slot="{ row }">
            <el-switch
              v-model="row.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              :disabled="!row.flag"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              v-waves
              size="mini"
              @click="cateedit(row)"
              :type="row.flag ? `success` : ''"
            >
              {{ !row.flag ? '编辑' : '完成' }}</el-button
            >
            <el-button v-waves size="mini" type="danger" @click="delcate(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <Paging :pageData="paging" @pagingIncident="catelist" />
      <!-- 添加弹窗 -->
      <el-dialog
        title="添加分类"
        :visible.sync="dialogVisible"
        width="25%"
        center
      >
        <el-form
          size="mini"
          :model="dialog"
          status-icon
          label-width="100px"
          class="demo-ruleForm"
          label-position="left"
        >
          <el-form-item label="商品分类">
            <el-input
              type="text"
              v-model="dialog.cateName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch
              v-model="dialog.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button v-waves @click="dialogVisible = false">取 消</el-button>
          <el-button v-waves type="primary" @click="addcate">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </Panel>
</template>

<script>
import { catelist, editCate, delCate, addCate } from '@/api/good'
import { okBox } from '@/utils/hint'
export default {
  data() {
    return {
      cateData: [],
      paging: {
        currentPage: 1,
        pageSize: 4,
        total: 0
      },
      dialogVisible: false,
      dialog: {
        cateName: '',
        state: ''
      }
    }
  },
  created() {
    this.catelist()
  },
  methods: {
    /* 获取列表 */
    async catelist() {
      const { total, data } = await catelist(this.paging)
      data.map(item => (item.flag = false))
      this.cateData = data
      this.paging.total = total
    },
    /* 编辑分类 */
    async cateedit(row) {
      if (row.flag) {
        await editCate({
          id: row.id,
          cateName: row.cateName,
          state: Boolean(row.state)
        })
      }
      row.flag = !row.flag
    },
    /* 删除分类 */
    delcate(row) {
      okBox('删除该分类').then(async () => {
        await delCate({ id: row.id })
        this.catelist()
      })
    },
    addshow() {
      this.dialogVisible = true
    },
    async addcate() {
      this.dialogVisible = false
      await addCate(this.dialog)
      this.dialog.cateName = ''
      this.catelist()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.title {
  display: flex;
  justify-content: space-between;
}
/deep/.el-dialog {
  border-radius: 10px;
}
</style>
